<div id="search-result-wrapper" class="hidden">
  <h3>Search Results:</h3>
  <div id="search-result"></div>
</div>

<style>
#search-result-wrapper {
  font-size: 2rem;
  background-color: #eee;
  padding: 5rem;
  padding-left: 31rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 10px #999;
  border-radius: 5px;
  background: white;
}
#search-result {
  padding-left: 3rem;
}

@media (max-width: 1200px) {
  #search-result-wrapper {
    font-size: 1.7rem;
    padding: 2rem;
  }

  #search-result {
    padding-left: 1rem;
  }
}

@media (max-width: 768px) {
  #search-result-wrapper {
    margin-top: 24rem !important;
  }
}
</style>

<script>
$(document).ready(function() {
  input = $("#search-input");
  wrapper = $("#search-result-wrapper");

  wrapper.hide();
  wrapper.removeClass("hidden");
  input.on("keyup change", function() {
    if (! input.val()) {
      wrapper.slideUp("ease");
    } else {
      wrapper.slideDown("ease");
    }
  });
});
</script>

<script src="{{ '/assets/js/simple-jekyll-search.min.js' | relative_url }}"></script>
<script>
  SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('search-result'),
    json: "{{ '/search.json' | relative_url }}"
  });
</script>
